<template>
  <Input
    ref="input"
    v-model="input"
    :placeholder="placeholder"
    :style="inputStyle"
    :disabled="disabled"
    :readonly="readonly"
    :size="size"
    @on-keydown="keyEvent"
    @on-blur="keyBlur" />
</template>
<script>
import { trim, timeout } from '../utils'
import Input from './input.vue'
const keys = [
  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58,
  96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110, 190,
  8, 13, 37, 38, 39, 40, 46
]
export default {
  name: 'input-number-plus',
  components: { Input },
  props: {
    value: {
      type: [Number, String]
    },
    width: {
      type: [Number, String]
    },
    placeholder: {
      type: String
    },
    min: {
      type: Number
    },
    max: {
      type: Number,
      default: 10
    },
    maxNum: {
      type: Number
    },
    step: {
      type: Number
    },
    precision: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    input: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    },
    visiable () {
      return Boolean(typeof this.value === 'number')
    },
    inputStyle () {
      const styleWidth = typeof this.width === 'number' ? `${this.width}px` : this.width
      return {
        width: styleWidth
      }
    }
  },
  methods: {
    // 动态词 键盘监听
    keyEvent (e) {
      const input = this.$refs.input && this.$refs.input.$refs.input
      let { _value, selectionStart, selectionEnd } = input
      if (selectionStart !== selectionEnd) return
      if (typeof _value !== 'string') _value = String(_value)
      const float = _value.includes('.')

      // 限制输入范围
      if (!keys.includes(e.keyCode)) window.event.returnValue = false
      else if (([110, 190].includes(e.keyCode) && this.precision === 0) || ([110, 190].includes(e.keyCode) && float)) window.event.returnValue = false
      else if (![8, 46, 37, 39].includes(e.keyCode) && float) {
        const [inter, floater] = _value.split('.')
        const lenInt = inter.length
        const lenFloat = floater.length
        const lastIndex = _value.lastIndexOf('.')
        if (selectionStart > lastIndex && lenFloat >= this.precision) window.event.returnValue = false // 输入小数位且小数位满
        else if (selectionStart <= lastIndex && lenInt >= this.max) {
          window.event.returnValue = false
          this.$emit('error', 'on-max-limit') // 超过了输入上限
        }
      } else if (![8, 46, 37, 39, 110, 190].includes(e.keyCode) && _value.length >= this.max) {
        window.event.returnValue = false
        this.$emit('error', 'on-min-limit') // 超过了输入上限
      } else if (e.shiftKey && e.keyCode === 190) {
        window.event.returnValue = false
      }
    },
    keyBlur () {
      const { _value } = this.$refs.input && this.$refs.input.$refs.input
      let value = trim(JSON.parse(JSON.stringify(_value)))
      if (value === '') return
      if (typeof value !== 'number') value = parseFloat(value)
      if (isNaN(value)) value = ''
      else if (this.min > value) { //超过了最小值输入限制
        value = this.min
      } else if (this.maxNum < value) { // 超过了最大值输入限制
        value = this.maxNum
      }
      timeout(0).then(() => { 
        this.$emit('input', value) 
        this.$emit('on-blur', value)
      })
    },
    focus () {
      this.$refs.input.focus()
    }
  }
}
</script>
